<template>
  <ContentDetailWrap :title="t('inventory.detail')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <!--    回显-->
    <Descriptions class="m-b-50px" :schema="detailSchema" :data="descriptionsRow" />
    <!--    列表-->
    <el-table
      :data="dataList"
      highlight-current-row
      stripe
      border
      v-loading="tableLoading"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column :label="t('expandCustomer.productID')" prop="product_id" width="300" />
      <el-table-column prop="link" :label="t('expandCustomer.linkToTheProduct')" width="300">
        <template #default="{ row }">
          <ElLink type="primary" :href="row.product_url" target="_blank"
            >{{ t('expandCustomer.jump') }}
          </ElLink>
          <ElButton
            link
            class="m-l-4"
            type="primary"
            @click="(copy(row.product_url) as any) && ElMessage.success('复制成功')"
          >
            {{ t('expandCustomer.replication') }}
          </ElButton>
        </template>
      </el-table-column>
      <el-table-column
        :label="t('expandCustomer.productTitle')"
        prop="product_title"
        :show-overflow-tooltip="true"
      />
    </el-table>
  </ContentDetailWrap>
</template>
<script setup lang="tsx">
import { Descriptions, type DescriptionsSchema } from '@/components/Descriptions'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { getDetailApi } from '@/api/expandCustomer'
import { ElButton, ElLink, ElMessage } from 'element-plus'
import { useClipboard } from '@vueuse/core'

const { t } = useI18n()
const { copy } = useClipboard()
const { push, go } = useRouter()
const { query } = useRoute()

const tableLoading = ref<boolean>(false)
const dataList = ref<any[]>([])

const descriptionsRow = ref<Record<string, any>>({})
const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'id',
    label: 'ID'
  },
  {
    field: 'country',
    label: t('expandCustomer.country')
  },
  {
    field: 'city',
    label: t('expandCustomer.city')
  },
  {
    field: 'user_id',
    label: t('expandCustomer.thirdPartyUserIDs'),
    slots: {
      default: (data: any) => {
        return (
          <>
            <ElLink type="primary" href={data.user_link} target="_blank">
              跳转
            </ElLink>
            <ElButton
              link
              class="m-l-4"
              type="primary"
              onClick={() => (copy(data.user_id) as any) && ElMessage.success('复制成功')}
            >
              复制
            </ElButton>
          </>
        )
      }
    }
  },
  {
    field: 'source',
    label: t('expandCustomer.dataSourcePlatform')
  },
  // {
  //   field: 'user_name',
  //   label: t('expandCustomer.thirdPartyUsernames')
  // },
  {
    field: 'last_crawl_time',
    label: t('expandCustomer.finallyCatchTheTime')
  },
  {
    field: 'keywords',
    label: t('expandCustomer.keywords')
  }
  // {
  //   field: 'tags',
  //   label: t('expandCustomer.label')
  // }
])

const getDetail = async () => {
  tableLoading.value = true
  const resp = await getDetailApi(query.id as string)
  descriptionsRow.value = resp.data
  dataList.value = resp.data.items_value
  tableLoading.value = false
}

onMounted(() => {
  getDetail()
})
</script>
<style lang="less" scoped></style>
